<script setup lang="ts">
import { reactive, ref } from "vue";
import type { RuleObject } from "ant-design-vue/es/form";
import { Form, message } from "ant-design-vue";
import { handleApi, handleForm } from "@/utils/alert.ts";
import { commentOrder } from '@/api/order'

export type CommentingProps = {
  order?: IOrder;
}

const props = defineProps<CommentingProps>()

const loading = ref(false)

const emit = defineEmits<{
  (e: 'complete'): void;
  (e: 'cancel'): void;
}>()
const rateData = [
  {value:1,color:'red'},
  {value:2,color:'yellow'},
  {value:3,color:'green'},
  {value:4,color:'blue'},
  {value:5,color:'purple'},
  {value:6,color:'grey'},
]
const formState = reactive<OrderCommentReq>({
  parent_order_id: '',
  remark: '',
  is_add_star: false,
  star: 0,

})
const formRules = reactive<PartialRecord<OrderCommentReq, RuleObject[]>>({
  parent_order_id: [],
  remark: [],
  is_add_star: [],
  star: []
})
const { validate, validateInfos } = Form.useForm(formState, formRules)

const onSubmit = async () => {
  const res = await validate().catch(handleForm) as OrderCommentReq | void
  if (res) {
    res.parent_order_id = props.order?.parent_order_id!
    loading.value = true
    const resp = await commentOrder(res).catch(handleApi)
    if (resp) {
      message.success('操作成功')
      emit('complete')
    }
    loading.value = false
  }
}

const onCancel = () => emit('cancel')

</script>

<template>
  <ASpin :spinning="loading">
    <AForm layout="horizontal"
           autocomplete="off"
           :label-col="{ span: 4 }"
           :wrapper-col="{ span: 18 }"
           :model="formState"
           @finish="onSubmit"
    >
      <AFormItem label="备注" v-bind="validateInfos.remark">
        <ATextarea v-model:value="formState.remark"></ATextarea>
      </AFormItem>

      <AFormItem :wrapper-col="{ offset: 4, span: 18 }" v-bind="validateInfos.is_add_star">
        <ACheckbox v-model:checked="formState.is_add_star">加旗标</ACheckbox>
      </AFormItem>

      <AFormItem v-if="formState.is_add_star" label="标星等级" v-bind="validateInfos.star">
<!--        <ARate :style="rateChange" v-model:value="formState.star">-->
<!--          <template #character>-->

<!--          </template>-->
<!--        </ARate>-->
        <a-radio-group v-model:value="formState.star">
          <a-radio v-for="(item,index) in rateData" :value="item.value" :key="index">
            <svg t="1714729261966" :style="{fill:item.color,stroke:item.color,width:20,height:20}" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1683" width="200" height="200"><path d="M152.474 62.225c-26.856 0-56.286 21.748-56.286 48.663v802.451c0 26.798 28.773 48.653 55.579 48.653 26.789 0 56.286-21.857 56.286-48.663v-802.434c0-26.914-28.78-48.663-55.579-48.663zM730.146 129.011c-157.836 0-157.836-64.694-315.663-64.694-91.108 0-161.46 42.504-161.46 42.504l-0.658 484.313s71.010-42.446 162.119-42.446c157.827 0 157.827 64.694 315.663 64.694 98.74 0 197.923-51.845 197.923-51.845v-484.264s-99.183 51.737-197.923 51.737z" p-id="1684"></path></svg>
          </a-radio>
        </a-radio-group>
      </AFormItem>

      <AFormItem :wrapper-col="{ offset: 4, span: 18 }">
        <div class="flex items-center space-x-2">
          <AButton type="primary" html-type="submit">提交备注</AButton>
          <AButton @click="onCancel">取消</AButton>
        </div>
      </AFormItem>
    </AForm>
  </ASpin>
</template>